<template>
  <!-- 搜索栏 -->
  <el-form inline :model="reservationSearchModel">
    <el-form-item label="客户ID" prop="reservationId">
      <el-input v-model="reservationSearchModel.reservationId" placeholder="请输入客户ID" style="width: 120px"></el-input>
    </el-form-item>
    <el-form-item label="场地ID" prop="venueId">
      <el-input v-model="reservationSearchModel.venueId" placeholder="请输入场地ID" style="width: 120px"></el-input>
    </el-form-item>
    <el-form-item label="场地类型" prop="venueType">
      <el-select v-model="reservationSearchModel.venueType" placeholder="请选择类型" style="width: 120px">
        <el-option label="足球场" value="足球场"></el-option>
        <el-option label="排球场" value="排球场"></el-option>
        <el-option label="羽毛球场" value="羽毛球场"></el-option>
        <el-option label="篮球场" value="篮球场"></el-option>
        <el-option label="乒乓球场" value="乒乓球场"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <!-- 操作栏 -->
  <div style="margin-bottom: 10px">
    <el-button type="primary" :icon="Search" @click="search()">查询</el-button>
    <el-button type="primary" :icon="RefreshRight" @click="reset">重置</el-button>
  </div>
  <!-- 内容栏 -->
  <el-table :data="reservationModel" border stripe style="width: 100%" ref="tableRows">
    <el-table-column label="客户ID" width="80" align="center" fixed>
      <template #default="scope">
        {{ scope.row.customer.id }}
      </template>
    </el-table-column>
    <el-table-column label="头像" width="80" align="center" fixed>
      <template #default="scope">
        <el-avatar v-if="scope.row.customer.avatar" :src="baseUrl + scope.row.customer.avatar" size="small"></el-avatar>
        <el-icon v-else><UserFilled/></el-icon>
      </template>
    </el-table-column>
    <el-table-column label="真实姓名" width="120" align="center">
      <template #default="scope">
        {{ scope.row.customer.realName }}
      </template>
    </el-table-column>
    <el-table-column label="场地ID" width="80" align="center">
      <template #default="scope">
        {{ scope.row.venue.id }}
      </template>
    </el-table-column>
    <el-table-column label="场地名称" width="140" align="center">
      <template #default="scope">
        {{ scope.row.venue.name }}
      </template>
    </el-table-column>
    <el-table-column label="人数" width="100" prop="participantCount" align="center">
      <template #default="scope">
        {{ scope.row.participantCount }}人
      </template>
    </el-table-column>
    <el-table-column label="预约日期" width="150" prop="reservationDate" align="center"></el-table-column>
    <el-table-column label="开始时间" width="150" prop="startTime" align="center"></el-table-column>
    <el-table-column label="结束时间" width="150" prop="endTime" align="center"></el-table-column>
    <el-table-column label="操作" width="250" align="center" fixed="right">
      <template #default="scope">
        <el-button type="primary" :icon="View" @click="viewDetails(scope.row)" size="small">详情</el-button>
        <el-button type="danger" :icon="Delete" @click="remove(scope.row)" size="small">取消预约</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页栏 -->
  <div style="display: flex; justify-content: center; margin-top: 10px">
    <el-pagination background
                   layout="prev, pager, next, total"
                   v-model:current-page="reservationPage.pageNo"
                   v-model:page-size="reservationPage.pageSize"
                   :total="reservationPage.total"
                   @change="changePage"
                   style="text-align: center"/>
  </div>
  <!-- 查看详情对话框 -->
  <el-dialog v-model="showDialog" title="详情" width="500px" align-center>
    <el-descriptions :column="1" :data="reservationDialogModel" border>
      <el-descriptions-item label="客户ID">
        {{ reservationDialogModel.customerId }}
      </el-descriptions-item>
      <el-descriptions-item label="真实姓名">
        {{ reservationDialogModel.realName }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        {{ reservationDialogModel.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="场地ID">
        {{ reservationDialogModel.venueId }}
      </el-descriptions-item>
      <el-descriptions-item label="场地名称">
        {{ reservationDialogModel.venueName }}
      </el-descriptions-item>
      <el-descriptions-item label="预约人数">
        {{ reservationDialogModel.participantCount }}
      </el-descriptions-item>
      <el-descriptions-item label="预约日期">
        {{ reservationDialogModel.reservationDate }}
      </el-descriptions-item>
      <el-descriptions-item label="开始时间">
        {{ reservationDialogModel.startTime }}
      </el-descriptions-item>
      <el-descriptions-item label="结束时间">
        {{ reservationDialogModel.endTime }}
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        {{ reservationDialogModel.remarks }}
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <el-button @click="showDialog = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
:deep(.row-disable) {
  opacity: 0.4; /* 低亮度效果 */
}
</style>


<script setup>
import {nextTick, onMounted, ref, toRaw} from "vue";
import api from "@/util/api.js";
import {Delete, Edit, Plus, RefreshRight, Search, SoldOut, UserFilled, View} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {cloneDeep} from "lodash";

//当组件挂载完毕之后触发
onMounted(async() => {
  await search();
})

//基础URL
const baseUrl = "http://localhost:8080";

//数据模型
let reservationModel = ref();

//搜索模型
let reservationSearchModel = ref({
  reservationId: "",
  venueId: "",
  venueType: "",
  status: "有效"
});

//分页模型
let reservationPage = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0
});

//预约详情对话框模型
let reservationDialogModel = ref({
  customerId: "",
  realName: "",
  phone: "",
  venueId: "",
  venueName: "",
  participantCount: "",
  reservationDate: "",
  startTime: "",
  endTime: "",
  remarks: ""
})

//表格行
let tableRows = ref();

//对话框
let showDialog = ref(false);

//查询全部
async function search(pageNo, pageSize) {
  //查询条件
  let params = reservationSearchModel.value;
  let resp = await api({
    url: "/admin/reservation",
    method: "get",
    params: {
      pageNo,
      pageSize,
      ...params,
    },
  })
  reservationModel.value = resp.data.records; //返回预约信息
  reservationPage.value.pageNo = resp.data.current; //当前页码
  reservationPage.value.pageSize = resp.data.size; //当前页大小
  reservationPage.value.total = resp.data.total; //总记录数
}

//点击重置按钮时触发
function reset() {
  reservationSearchModel.value = {
    reservationId: "",
    venueId: "",
    venueType: "",
    status: "有效"
  }
  search();
}

//当页码或页面大小改变时触发
function changePage(pageNo, pageSize) {
  search(pageNo, pageSize);
}

//点击查看预约详情
function viewDetails(row) {
  showDialog.value = true;
  //console.log(showDialog)
  reservationDialogModel.value = {
    customerId: row.customer.id,
    realName: row.customer.realName,
    phone: row.customer.phone,
    venueId: row.venue.id,
    venueName: row.venue.name,
    participantCount: row.participantCount,
    reservationDate: row.reservationDate,
    startTime: row.startTime,
    endTime: row.endTime,
    remarks: row.remarks
  };
  console.log(reservationDialogModel.value);
}

//点击取消预约时触发 -> 删除预约
//将id包装为ids 方便复用
function remove(row) {
  ElMessageBox.confirm("确定要取消该客户的预约吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async() => {
    let id = row.id;
    let ids = [id];
    let resp = await api({
      url: "/admin/reservation",
      method: "delete",
      data: ids
    })
    if (resp.success) {
      ElMessage.success("取消预约成功");
      await search();
    } else {
      ElMessage.error("取消预约失败");
    }
  }).catch(() => {
    ElMessage.info("已保留预约");
  })
}
</script>
